<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<!-- 插入和替换元素操作：针对元素增删改元素
		 append()  功能：在匹配元素集合中所有元素的内部末尾插入内容
		 prepend() 功能：在匹配元素集合中所有元素的内部开头插入内容
		 
		 after()   功能：在匹配元素集合中所有元素的外部后面插入内容
		 before()  功能：在匹配元素集合中所有元素的外部前面插入内容
		 
		 remove()  功能：移除匹配元素集合中所有的元素和子元素【盒子模型都删掉】
		 empty()   功能：清空匹配元素集合中所有的元素和子元素【盒子模型不删掉】
		 
		 replaceWith()
		 -->
		<style>
			button{
				margin: 5px;
				padding: 10px 15px;
				cursor: pointer;
				}
			body{
				margin: 20px;
			}
			#target{
				border: 1px solid #1e1e2e;
				margin-left: 5px;
				padding: 10px;
				margin-top: 10px;
				border-radius: 5px;
			}
			.boss{
				width:300px;
				height:300px;
				background-color:#ff0;
				border-radius:50%;
				background-image:url(../img/123.png);
				background-size:100% 100%;
			    color:transparent;
				display:block;
			}
		</style>
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		 <button id="appendBtn">内部末尾插入元素</button>
		 <button id="prependBtn">内部开头插入元素</button>
		 <button id="afterBtn">外部后面插入元素</button>
		 <button id="beforeBtn">外部前面插入元素</button>
		 <button id="removeBtn">删除元素</button>
		 <button id="emptyBtn">清空元素</button>
		 <button id="replaceBtn">替换元素</button>
		 <!-- 目标显示区域 -->
		 <div id="target">
			 <p>目标元素的初始段落</p>
		 </div>
		 <!-- 用于插入跟替换的区域 -->
		 <div id="newElement" style="display:none;">
			 <p>插入新元素的初始段落</p>
		 </div>
		 <script>
			 /*1.点击 内部末尾插入元素  按钮 p文本后面追加新元素中包含内容操作*/
			 $("#appendBtn").click(function(){
				 //效果：点击按钮 追加“新元素--自带内容”
				 //1.1 追加内容是新元素--克隆--html结构全部复制出来，元素包含属性
			    var cpe= $("#newElement").clone();
				 //clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
			     //1.2自带属性和属性值：隐藏---改成显示
				 cpe.css("display","block");
				 //1.3 将复制出来的新元素，追加给当前元素上
				 $("#target").append(cpe);
			 });
			 /*2.点击 内部开头插入元素  按钮 p文本后面追加新元素中包含内容操作 */
			 $("#prependBtn").click(function(){
			 	 var cpe= $("#newElement").clone();
			 	cpe.css("display","block");
                $("#target").prepend(cpe);
			 });
			 /*3. 点击 外部后面插入元素  按钮 p文本后面追加新元素中包含内容操作*/
			 $("#afterBtn").click(function(){
			 	 var cpe= $("#newElement").clone();
			 	cpe.addClass("boss");//addClass函数
			    $("#target").after(cpe); 
			 });
			/*4. 点击 外部前面插入元素  按钮 生成 圆形，保留背景色，文本不需要，背景图 300*300*/
		     $("#beforeBtn").click(function(){
		   	    var cpe= $("#newElement").clone();
		   	    cpe.css({"width":"300px",
			             "height":"300px",
					     "background-color":"#ff0",
					     "border-radius":"50%",
					     "background-image":"url(../img/123.png)",
					     "background-size":"100% 100%",
					     "color":"transparent",
					     "display":"block",
			});
		      $("#target").before(cpe);
		   });
		   /*5.点击 删除元素 按钮  页面上所有元素包括子元素全部删除【盒子模型删】*/
		      $("#removeBtn").click(function(){
			     $("#target").remove();
		   });
		   /*6.点击 清空元素 按钮  页面上所有元素中内容全部删除【盒子模型不删】*/
		      $("#emptyBtn").click(function(){
		   	     $("#target").empty();
		   });
		   /*7.点击 替换元素 按钮 页面上目标元素替换为新元素  */
		      $("#replaceBtn").click(function(){
		   	     //克隆  新元素 #newElement 【父子级】
			var c=$("#newElement").clone().css("display","block");
				//替换 找到目标元素 替换 新元素
				 $("#target").replaceWith(c);
		   });
		 </script>
	</body>
</html>